<template>
    <div class="screen-block">
        <Title>车队分析</Title>
        <div class="list1">
            <border-box7 v-for="item in option" :key="item">
                <div class="list-con">
                    <div class="title">{{ item.name }}</div>
                    <div class="value">{{ item.value }}</div>
                </div>
            </border-box7>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { BorderBox7 } from '@kjgl77/datav-vue3';
    import Title from '../title.vue';
    import { queryFleet } from '../../service';

    const option = ref([
        { name: '收费系统', value: 93 },
        { name: '通信系统', value: 32 },
        { name: '监控系统', value: 65 },
    ]);
    const fetchData2 = async () => {
        const data = await queryFleet();
        const { result } = data as any;
        option.value.length = 0;
        option.value.push({
            name: '销售额',
            value: result.totalAmount,
        });
        option.value.push({
            name: '加注量',
            value: result.totalVolume,
        });
        option.value.push({
            name: '订单数',
            value: result.orderNum,
        });
    };
    fetchData2();
</script>

<style lang="less">
    .screen-block {
        width: 100%;
        height: 100%;

        .list1 {
            display: grid;
            grid-gap: 10px;
            grid-template-rows: repeat(1, 100%);
            grid-template-columns: 30% 30% 30%;
            width: 100%;
            height: 45%;
            margin-left: 20px;
            padding: 0;

            .list-con {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
        }

        .title {
            font-size: 10px;
        }

        .value {
            color: #1cd1ff;
            font-weight: bold;
            font-size: 18px;
        }
    }
</style>
